<template>
  <div class="app-container echart_container">
    <div id="echartContainer" :style="{width: '300px', height: '300px'}" />
    <div id="echartContainer1" :style="{width: '300px', height: '300px'}" />
    <div id="echartContainer2" :style="{width: '300px', height: '300px'}" />
    <div id="echartContainer3" :style="{width: '300px', height: '300px'}" />
    <div id="echartContainer4" :style="{width: '500px', height: '400px'}" />

    <div id="echartContainer5" :style="{width: '500px', height: '400px'}" />
    <div id="echartContainer6" :style="{width: '500px', height: '400px'}" />

  </div>
</template>

<script>
export default {
  name: 'ChartTypebar',
  data() {
    return {}
  },
  mounted() {
    this.drawChart()
    this.drawChart1()
    this.drawChart2()
    this.drawChart3()
    this.drawChart4()
    this.drawChart5()
    this.drawChart6()
  },
  created() {
  },
  methods: {
    // 基本的使用
    drawChart() {
      const echartContainer = this.$echarts.init(document.getElementById('echartContainer'))
      // 绘制图表
      const options = {
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {}, // 会根据数据的变化进行跟随改变高度
        series: [
          {
            type: 'bar', // 图标的类型
            data: [23, 24, 18, 25, 27, 28, 25]
          },
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          },
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      }
      echartContainer.setOption(options)
    },
    // 根据条件自定义
    /**
     * 柱条样式
柱条的样式可以通过 series.itemStyle 设置，包括：

柱条的颜色（color）；
柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
柱条圆角的半径（barBorderRadius）；
柱条透明度（opacity）；
阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
     */
    drawChart1() {
      const echartContainer = this.$echarts.init(document.getElementById('echartContainer1'))
      // 绘制图表
      const options = {
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {}, // 会根据数据的变化进行跟随改变高度
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',

            itemStyle: {
              color: 'red'
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            },
            barGap: '20%',
            barCategoryGap: '40%'
          },
          {
            data: [5, 4, 3, 5, 50],
            type: 'bar'

          }
        ]
      }
      echartContainer.setOption(options)
    },
    drawChart2() {
      const echartContainer = this.$echarts.init(document.getElementById('echartContainer2'))
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
      echartContainer.setOption(option)
    },

    drawChart3() {
      const echartContainer = this.$echarts.init(document.getElementById('echartContainer3'))
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: [
            ['score', 'amount', 'product'],
            [0, 58212, 'Matcha Latte'],
            [0, 78254, 'Milk Tea'],
            [100, 41032, 'Cheese Cocoa'],
            [0, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
          ]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { name: 'amount' },
        yAxis: { type: 'category' },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            }
          }
        ]
      }
      echartContainer.setOption(option)
    },
    drawChart4() {
      const echartContainer = this.$echarts.init(document.getElementById('echartContainer4'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '降水量',
            min: 0,
            max: 250,
            position: 'right',
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            position: 'left',
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: '降水量',
            type: 'bar',
            yAxisIndex: 0,
            data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
          },
          {
            name: '温度',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: [
              6.0,
              10.2,
              10.3,
              11.5,
              10.3,
              13.2,
              14.3,
              16.4,
              18.0,
              16.5,
              12.0,
              5.2
            ]
          }
        ]
      }
      echartContainer.setOption(option)
    },
    drawChart5() {
      const echartContainer = this.$echarts.init(document.getElementById('echartContainer5'))
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: [
            ['product', '2015', '2016', '2017'],
            ['广州', 43.3, 85.8, 93.7],
            ['佛山', 83.1, 73.4, 55.1],
            ['汕头', 86.4, 65.2, 82.5],
            ['珠海', 72.4, 53.9, 39.1]
          ]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
      echartContainer.setOption(option)
    },
    drawChart6() {
      const echartContainer = this.$echarts.init(document.getElementById('echartContainer6'))
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
          // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          // 完成映射，参见后文。
          dimensions: ['product', '2015', '2016', '2017'],
          source: [
            { product: '广州', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
            { product: '深圳', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
            { product: '北京', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
            { product: '南京', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
      echartContainer.setOption(option)
      // 处理点击事件并且跳转到相应的百度搜索页面
      echartContainer.on('click', (params) => {
        console.log('param', params)
      })
    }
  }

}
</script>

<style lang="scss">

.echart_container{
  width: 100%;
  flex-flow: wrap;
  display: flex;
}

</style>
